<script setup>
import { ref, onMounted, toRefs } from 'vue'
import {unit2} from '../unit.js'
import link from '../link.js'

defineProps({
    config: Object,
});

</script>

<template>

<div class="diy-picture" :style="{marginBottom: unit2(config?.marginBottom)}">
    <img class="image" :src="config?.list[0]?.url" :alt="config?.name" :style="{
        width: unit2(config?.width, config?.width_unit),
        height: unit2(config?.height, config?.height_unit),
        borderRadius: unit2(config?.borderRadius),
    }" @click="link(config?.list[0])" />
</div>


</template>

<style scoped>
    .diy-picture{
        width: 100%; min-height: 50px; overflow: hidden; position: relative;text-align: center;
    }
    .image{max-width: 100%; min-height: 50px; overflow: hidden;}
</style>